<template>
    <view class="home">
        <view class="item it_flex" @click="yijiCate()">
            <view class="it_left">选择分类</view>
            <view class="it_right">
                <text>{{ yijiName ? yijiName : "请选择分类" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item it_flex">
            <view class="it_left">商品名称</view>
            <input type="text" placeholder="请输入商品名称" v-model="name" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品积分</view>
            <input type="text" placeholder="请输入商品名称" v-model="score" />
        </view>
        <view class="item it_flex" v-if="yijiId == 2">
            <view class="it_left">商品价格</view>
            <input type="text" placeholder="请输入商品名称" v-model="money" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品原价</view>
            <input type="text" placeholder="请输入商品原价" v-model="original_price" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品划线价</view>
            <input type="text" placeholder="请输入商品划线价" v-model="line_original_price" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品库存</view>
            <input type="text" placeholder="请输入商品库存" v-model="stock" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品详情</view>
            <input type="text" placeholder="请输入商品详情" v-model="content" />
        </view>
        <view class="item it_flex" @click="getFreight">
            <view class="it_left">商品配送类型</view>
            <view class="it_right">
                <text>{{ postagename ? postagename : "请选择商品配送类型" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品封面</view>
            <view class="u-flex u-flex-wrap it_right">
                <view class="it_rig_img" style="position: relative" v-if="image">
                    <image class="it_rig_img" mode="aspectFill" :src="imgUrl + image"></image>
                </view>
                <view class="it_rig_box" v-else @click="uplistImg">+</view>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品图片</view>
            <view class="u-flex u-flex-wrap it_right">
                <block v-if="imagesUp">
                    <view class="it_rig_img" style="position: relative" v-for="img in imagesUp" :key="img">
                        <image class="it_rig_img" mode="aspectFill" :src="imgUrl + img"></image>
                    </view>
                </block>
                <view class="it_rig_box" @click="upshopImg">+</view>
            </view>
        </view>
        <view style="height: 80rpx"></view>
        <!-- 发布 -->
        <view class="add1 btn u-flex-center" style="text-align: center; line-height: 80rpx" @click="getSubmit()">确认发布
        </view>
        <view style="height: 30rpx"></view>
        <!-- 选择分类--1=纯积分,2=积分+钱  -->
        <uv-picker keyName="name" ref="is_cate_show" @confirm="confirmIt" :columns="selector"></uv-picker>
        <!-- 运费模板 -->
        <uv-picker keyName="name" ref="is_yunfei_show" @confirm="getPostage" :columns="postagelist"></uv-picker>
        <!-- 店铺分类 -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: this.$imgUrl,

            is_cate_show: false, //是否显示一级分类
            selector: [
                [
                    { name: "纯积分", id: 1 },
                    { name: "积分+钱", id: 2 },
                ],
            ], //分类
            claCgildList: [], //分类下的子分类
            classChildList1: [], //子分类下的子分离
            yijiName: "", //分类
            yijiId: null, //分类id

            is_yunfei_show: false, //是否显示运费模板
            postagelist: [
                [
                    // { name: "快递", id: 1 },
                    { name: "仅自提", id: 2 },
                    // { name: "物流+自提", id: 3 },
                ],
            ], //运费模板
            postageid: "",
            postagename: "",

            name: "", //标题
            id: "", //id

            image: "", //图片
            imagesUp: [], //传走的图片路径

            content: "", //详情

            score: 0, //积分

            money: 0, //钱

            stock: 0, // 库存

            original_price: 0, //原价

            line_original_price: 0, //划线价
        };
    },
    onLoad(options) { },
    onShow() { },

    methods: {
        //旧的
        yijiCate() {
            this.$refs.is_cate_show.open();
        },
        // 分类
        confirmIt(e) {
            this.yijiName = `${e.value[0]?.name} ${e.value[1]?.name ?? ""} ${e.value[2]?.name ?? ""}`;
            this.yijiId = e.value[2]?.id || e.value[1]?.id || e.value[0]?.id;
        },
        //打开运费模版
        getFreight() {
            this.$refs.is_yunfei_show.open();
        },
        // 配送类型确定
        getPostage(e) {
            this.postageid = e.value[0].id;
            this.postagename = e.value[0].name;
        },
        //上传图片--封面
        uplistImg() {
            if (this.image == "") {
                uni.chooseImage({
                    count: 1,
                    success: async (res) => {
                        uni.request({
                            url: "/wanlshop/common/uploadData",
                            success: (updata) => {
                                uni.uploadFile({
                                    url: updata.data.uploadurl,
                                    filePath: res.tempFilePaths[0],
                                    formData: updata.data.storage == "local" ? null : updata.data.multipart, // 1.0.5升级
                                    header: { token: this.$store.state.user.token },
                                    name: "file",
                                    success: (data) => {
                                        this.image = JSON.parse(data.data).data.url;
                                    },
                                });
                            },
                        });
                    },
                });
            } else {
                uni.showToast({
                    title: "只能上传一张封面",
                    icon: "none",
                });
            }
        },
        //上传图片
        upshopImg() {
            uni.chooseImage({
                count: 1,
                success: async (res) => {
                    uni.request({
                        url: "/wanlshop/common/uploadData",
                        success: (updata) => {
                            uni.uploadFile({
                                url: updata.data.uploadurl,
                                filePath: res.tempFilePaths[0],
                                formData: updata.data.storage == "local" ? null : updata.data.multipart, // 1.0.5升级
                                header: { token: this.$store.state.user.token },
                                name: "file",
                                success: (data) => {
                                    this.imagesUp.push(JSON.parse(data.data).data.url);
                                },
                            });
                        },
                    });
                },
            });
        },
        getSubmit() {
            uni.request({
                url: "/shop.score/AddScoreGoods",
                method: "POST",
                data: {
                    name: this.name, //标题
                    image: this.image, //图片封面
                    images: this.imagesUp, //轮播图
                    type: this.yijiId, //分类id,
                    score: this.score, //积分
                    money: this.money, //钱
                    stock: this.stock, //库存
                    content: this.content, //详情
                    original_price: this.original_price, //原价
                    line_original_price: this.line_original_price, //划线价
                    delivery_type: this.postageid, //配送类型
                },
                success: (res) => {
                    uni.showToast({
                        title: "商品提交成功",
                        //将值设置为 success 或者直接不用写icon这个参数
                        icon: "none",
                        //显示持续时间为 2秒
                        duration: 3000,
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1000);
                },
                fail: (res) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
/* 多规格 */
.wrap {
    width: 100%;
    padding: 20rpx;
    overflow: hidden;

    .wrap-list {
        margin: 20rpx auto;
        width: 700rpx;
        background-color: white;
        overflow: hidden;
        border-radius: 20rpx;

        .item {
            padding: 20rpx;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            overflow: hidden;
        }

        .top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
                text-align: left;
            }

            .delete {
                font-size: 28rpx;
                color: #333;
            }
        }

        .sku-list {
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .sku-item {
                width: 200rpx;
                height: 100rpx;
                margin-bottom: 30rpx;

                input {
                    text-align: left;
                }
            }
        }

        .add {
            width: 200rpx;
            height: 50rpx;
            border: 2rpx solid #00a67a;
            padding: 10rpx 20rpx;
            color: #00a67a;
        }
    }

    .input {
        flex: 1;
        height: 60rpx;
    }

    .wrap-btn {
        margin: 20rpx auto;
        width: 400rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        background-color: green;
        border-radius: 50rpx;
        overflow: hidden;
        color: white;
        font-size: 32rpx;
    }
}

/* //旧的 */
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}

.home {
    width: 100%;
    min-height: 100vh;
    padding-top: 30rpx;
}

.top {
    padding: 30rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }
}

.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item_pad_bot {
    padding-bottom: 10rpx !important;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;

    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .it_right {
        display: flex;
        align-items: center;

        text {
            color: #222;
        }

        .it_lef_img {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }

        .it_rig_img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }

        .it_rig_box {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            background: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c9c9c9;
            font-size: 84rpx;

            image {
                width: 60rpx;
                height: 60rpx;
            }
        }
    }

    .it_right_duo {
        border-bottom: 1rpx solid #dfdfdf;

        &:last-child {
            border: none;
        }
    }

    .it_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .it_grey {
            font-size: 28rpx;
            color: #888;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }

        input {
            font-size: 28rpx;
            font-weight: bold;
            text-align: left;
        }
    }

    .it_specs {
        color: #222;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        padding: 10rpx 40rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
        margin-bottom: 20rpx;

        .it_sp_line {
            width: 2rpx;
            height: 24rpx;
            margin: 0 20rpx 0 24rpx;
        }

        .it_sp_cha {
            width: 20rpx;
            height: 20rpx;
        }

        .it_sp_plus {
            width: 20rpx;
            height: 20rpx;
            margin-right: 20rpx;
        }

        .it_sp_gre {
            color: #606dce;
        }
    }

    .it_specs input {
        flex: 1;
        max-width: 60rpx;
    }

    .it_pri {
        font-size: 24rpx;
        color: #222;
        padding: 10rpx 48rpx;
        background: #f5f5f5;
        margin-right: 30rpx;
    }

    .it_ban {
        width: 50%;
        padding: 30rpx 0;

        input {
            flex: 1;
            text-align: left;
            margin-left: 20rpx;
        }
    }
}

.btn {
    width: 630rpx;
    height: 80rpx;
    margin-top: 157rpx;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer-content {}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scimg {
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
}

.textarea {
    height: 80rpx;
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}

.add1 {
    width: 80%;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(#ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}

.u-flex-wrap {
    flex-wrap: wrap;
}
</style>
